<template>
	<div class="editshop">
		<div class="header">
			<i class="el-icon-erp-shangyiye" @click="back"></i>
			<p class="add">修改店铺</p>
			<!--<p class="submit" @click="submit">保存</p>-->
		</div>
		<div class="body">
			<div class="box">
				<input type="text" class="shopname" v-model="shopname" placeholder="店铺名" />
				<input type="tel" class="phone" v-model="phone" placeholder="手机号码" />
				<div class="address" @click="change">
					<div class="pca">
						<p>{{province}}</p>
						<p>{{city}}</p>
						<p>{{areas}}</p>
					</div>
					<i class="el-icon-erp-gengduo"></i>
				</div>
				<input type="text" class="detailedinfor" v-model="detailedinfor" placeholder="详细地址" />
			</div>
			<upload @imgUrl="reciveUrl" :shopImg="imgUrl"></upload>
			<p class="submit" @click="submit">保存</p>
		</div>
		<distpicker v-show="isModalShow" @close="close" @receive="receive"></distpicker>
	</div>
</template>
<script>
import distpicker from '@/components/m-distpicker/distpicker'
import upload from '@/components/m-upload/upload'

export default {
	name: 'editshop',
	components:{
		distpicker,
		upload
	},
	data() {
		return {
			isModalShow:false,
			shopname:'',
			phone:'',
			province:'请选择地址',
			city:'',
			areas:'',
			detailedinfor:'',
			code:'',
			imgUrl:''
		}
	},
	created () {
		this.getShop()
	},
	mounted() {
		
	},
	methods: {
		getShop () {
			this.$http.get(this.$store.state.reqUrl + '/shops/info/'+this.$route.query.shop_id, {}).then(res => {
				this.shopname = res.data.shopName;
				this.detailedinfor = res.data.detailAddress;
				this.phone = res.data.phoneNo;
				this.imgUrl = res.data.shopImg;
				this.province = res.data.area.areaName;
				this.city = res.data.area.childArea.areaName;
				this.areas = res.data.area.childArea.childArea.areaName;
				this.code = res.data.area.childArea.childArea.areaCode
		   })
		},	
		//返回
		back() {
			this.$router.go(-1)
		},
		 //打开莫泰克
		 change () {
		 	this.isModalShow = true;
		 },
		 //接受子组件参数
		 receive (data) {
		 	this.province = data.province.value;
		 	this.city = data.city.value;
		 	this.areas = data.area.value;
		 	this.code = data.area.code
		 },
		 //三级联动
		 close () {
		 	this.isModalShow = false;
		 },
		 //图片
		 reciveUrl (imgUrl) {
            this.imgUrl = imgUrl; 
           // console.log(this.imgUrl)
		 },
		//修改
		submit() {
			if(this.shopname == null || this.shopname == ""){
				this.$messagebox.alert("店铺名不能为空！")
				return false;
			}
		 	if(this.phone == null || this.phone == ""){
				this.$messagebox.alert("手机号码不能为空！")
				return false;
			}else{
				var pattern = /^0\d{2,3}-?\d{7,8}$/
				var myreg=/^[1][3,4,5,7,8][0-9]{9}$/
				if(!pattern.test(this.phone.replace(/\s+/g,""))) {
					if(!myreg.test(this.phone.replace(/\s+/g,""))){
						this.$messagebox.alert("请输入正确的手机号码！")
				        return false;
					}
				}
			}
			if(this.code == null || this.code == ""){
				this.$messagebox.alert('地址不能为空！')
				return false;
			}	
			if(this.detailedinfor == null || this.detailedinfor == "") {
				this.$messagebox.alert('详细地址不能为空！')
				return false;
			}
			if(this.imgUrl == null || this.imgUrl == "") {
				this.$messagebox.alert('请上传一张门店图片！')
				return false;
			}
			this.$http.put(this.$store.state.reqUrl + '/shops/info', {
				areaCode:this.code,
				detailAddress:this.detailedinfor,
				phoneNo: this.phone,
				shopImg:this.imgUrl,
				shopId:this.$route.query.shop_id,
				shopName: this.shopname,
			}).then(res => {
				this.$toast({
					message:res.data,
					duration:8000
				})
				this.$router.go(-1)
			}).catch(res => {
				this.$toast(res.response.data)
			})
		}
	}
}
</script>

<style lang="less" scoped>
    .editshop {
    	width:100%;
	background: #FFFFFF;
	.header{
		position: fixed;
		top: 0;
		left: 0;
		width:100%;
		height: 100px;
		background: #FFFFFF;
		display: flex;
		i{
			width:60px;
			font-size: 40px;
			line-height: 100px;
			text-align: center;
		}
		.add{
			flex: 1;
			font-size: 30px;
			line-height: 100px;
			text-align: center;
			color: #000000;
			font-weight: 500;
			margin-right: 50px;
		}
		/*.submit{
			width:80px;
			font-size: 30px;
			line-height: 100px;
		}*/
	}
	.body{
		overflow-x: hidden;
		width:100%;
        padding-bottom: 60px;
        margin-top: 110px;
		.box{
			width:100%;
			padding-bottom:60px;
			.shopname{
				width:100%;
				font-size: 28px;
				color: #000000;
				padding:30px 20px;				
				border-bottom: 1px solid gainsboro;
			}
			.phone{
				width:100%;
				font-size: 28px;
				color: #000000;
				padding:30px 20px;
				/*border-top: 1px solid gainsboro;*/
				border-bottom: 1px solid gainsboro;
			}
			.address{
				width:100%;
				padding:27px 20px;
				justify-content: center;
				align-items: center;
				display: -webkit-flex;
				border-bottom: 1px solid gainsboro;
				.pca{
					flex: 1;
					p{
						font-size: 28px;
						color: #000000;
					}
					.selectaddress{
						font-size: 28px;
						color: #000000;
						opacity: 0.45;
					}
				}
				i{
					width:80px;
					font-size: 30px;
					font-weight: 800;
					color: #000000;
				}				
		    }
		    .detailedinfor{
		    	    width:100%;
					padding:40px 20px;
					font-size: 28px;
					color: #000000;
					border-bottom: 1px solid gainsboro;
				}	
		}
		.submit{
			width:200px;
			font-size: 30px;
			line-height: 90px;
			text-align: center;
			height: 90px;
			background: #f47920;
			color: #FFFFFF;
			margin:0 auto;
			border-radius: 30px;
		}
	}
	input{
		outline: none;
	}
	input:focus{
		outline: none;
	}
    } 
</style>